<template>
  <div class="wrapper" id="container">
    <div></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { relate } from './lib/relate'

export default {
  data() {
    return {
      graph: null,
    }
  },
  methods: {
    initGraph() {
      var chartDom = document.getElementById('container')
      var myChart = echarts.init(chartDom)
      myChart.showLoading()

      let legendData = relate.map((item) => {
        return { name: item.name, icon: 'rectangle' }
      })
      let seriesData = relate.map((item) => {
        let json = {
          type: 'tree',
          name: item.name,
          data: [item],
          top: '2%',
          left: '5%',
          bottom: '12%',
          right: '7%',
          symbolSize: 10,
          orient: 'vertical',
          edgeShape: 'curve',
          // layout:'radial',
          roam: true,
          itemStyle: {
            color: '#106EBE',
          },
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            color: '#000',
            fontSize:14,
            fontWeight:500
          },
          labelLayout:{
            hideOverlap:true,
            moveOverlap:true
          },
          lineStyle:{
            color: '#106EBE',
            width:1
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left',
            },
          },
          emphasis: {
            // focus: 'descendant'
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750,
        }
        return json
      })
      var option = {
        // backgroundColor: 'rgba(0,0,0,1)',
        // darkMode: true,
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        legend: {
          top: '1%',
          left: '3%',
          orient: 'vertical',
          data: legendData,
          borderColor: '#c23531',
        },
        series: seriesData,
      }

      myChart.setOption(option)
      myChart.hideLoading()
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initGraph()
    })
  },
}
</script>

<style lang="scss" scope></style>
